<template>
  <div class="my-reservation-page">
    <!-- 下拉刷新容器 -->
    <div 
      class="pull-refresh-container"
      :style="{ transform: `translateY(${pullDistance}px)` }"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <!-- 下拉刷新指示器 -->
      <div class="pull-refresh-indicator" :class="{ 'refreshing': isRefreshing }">
        <div class="refresh-icon" :class="{ 'rotating': isRefreshing }">
          <svg viewBox="0 0 24 24" width="24" height="24">
            <path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
          </svg>
        </div>
        <div class="refresh-text">
          {{ isRefreshing ? '正在刷新...' : (pullDistance > 50 ? '释放立即刷新' : '下拉刷新') }}
        </div>
      </div>

      <!-- 页面头部 -->
      <div class="header" ref="headerRef">
        <button class="back-button" @click="goBack"></button>
        <div class="page-title">我的预约</div>
        <div class="header-right"></div>
      </div>

      <div class="status-tabs">
        <div
          class="tab"
          :class="{ active: activeTab === 'success' }"
          @click="handleTabChange('success')"
        >
          预约成功
        </div>
        <div
          class="tab"
          :class="{ active: activeTab === 'queue' }"
          @click="handleTabChange('queue')"
        >
          候补中
        </div>
      </div>

      <!-- 预约成功列表 -->
      <div v-if="activeTab === 'success'" class="reservation-list">
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"></div>
          <div class="loading-text">加载中...</div>
        </div>
        <div v-else>
          <!-- 获取分组后的数据 -->
          <div
            v-for="(group, date) in groupByDate(reservationData)"
            :key="date"
            class="date-section"
          >
            <div class="date-header">
              <img
                src="@/assets/CampusBus/bus-icon1.svg"
                alt="公交车图标"
                class="bus-icon"
              />
              <span class="date-text">{{ formatDate(date) }}</span>
            </div>
            <div class="reservation-items">
              <div
                v-for="item in group"
                :key="item.id || item.line + item.date"
                class="reservation-item"
              >
                <div class="route-info">
                  <div class="route-cities">
                    <span class="city">{{
                      item.tBusSchedule?.line === 1 ||
                      item.tBusSchedule?.line === 2 ||
                      item.line === 1 ||
                      item.line === 2
                        ? "青州"
                        : "潍坊"
                    }}</span>
                    <div class="arrow-container">
                      <span class="time-label">{{
                        item.timeLabel || getTimeOfDay(item.tBusSchedule?.line || item.line)
                      }}</span>
                      <img
                        src="@/assets/CampusBus/card/箭头/image.png"
                        alt="箭头"
                        style="height: 5px"
                      />
                      <div class="bus-info">
                        <span class="info-item"
                          >车牌:
                          <span class="info-value">{{
                            item.tBus?.licensePlate
                          }}</span></span
                        >
                        <span class="info-item"
                          >座位:
                          <span class="info-value">{{
                            item.tBus?.maxCapacity || 49
                          }}</span></span
                        >
                      </div>
                    </div>
                    <span class="city">{{
                      item.tBusSchedule?.line === 1 ||
                      item.tBusSchedule?.line === 2 ||
                      item.line === 1 ||
                      item.line === 2
                        ? "潍坊"
                        : "青州"
                    }}</span>
                    <button
                      class="cancel-button"
                      @click="handleCancelReservation(item)"
                    >
                      取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 如果没有任何预约数据，显示空状态 -->
        <div v-if="!loading && reservationData.length === 0" class="empty-state">
          <img src="@/assets/CampusBus/bus-icon1.svg" alt="无预约" class="empty-icon" />
          <div class="empty-text">暂无预约成功的记录</div>
        </div>
      </div>

      <!-- 候补中列表 -->
      <div v-else-if="activeTab === 'queue'" class="reservation-list">
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"></div>
          <div class="loading-text">加载中...</div>
        </div>
        <div v-else>
          <!-- 获取分组后的数据 -->
          <div
            v-for="(group, date) in groupByDate(reservationData)"
            :key="date"
            class="date-section"
          >
            <div class="date-header">
              <img
                src="@/assets/CampusBus/bus-icon1.svg"
                alt="公交车图标"
                class="bus-icon"
              />
              <span class="date-text">{{ formatDate(date) }}</span>
            </div>
            <div class="reservation-items">
              <div
                v-for="item in group"
                :key="item.id || item.line + item.date"
                class="reservation-item"
              >
                <div class="route-info">
                  <div class="route-cities">
                    <span class="city">{{
                      item.tBusSchedule?.line === 1 ||
                      item.tBusSchedule?.line === 2 ||
                      item.line === 1 ||
                      item.line === 2
                        ? "青州"
                        : "潍坊"
                    }}</span>
                    <div class="arrow-container">
                      <span class="time-label">{{
                        item.timeLabel || getTimeOfDay(item.tBusSchedule?.line || item.line)
                      }}</span>
                      <img
                        src="@/assets/CampusBus/card/箭头/image.png"
                        alt="箭头"
                        style="height: 5px"
                      />
                      <div class="bus-info">
                        <span class="info-item"
                          >车牌:
                          <span class="info-value">{{
                            item.tBus?.licensePlate
                          }}</span></span
                        >
                        <span class="info-item"
                          >座位:
                          <span class="info-value">{{
                            item.tBus?.maxCapacity || 49
                          }}</span></span
                        >
                      </div>
                    </div>
                    <span class="city">{{
                      item.tBusSchedule?.line === 1 ||
                      item.tBusSchedule?.line === 2 ||
                      item.line === 1 ||
                      item.line === 2
                        ? "潍坊"
                        : "青州"
                    }}</span>
                     <button
                class="cancel-button"
                @click="handleCancelReservation(item)"
              >
                取消
              </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 如果没有任何候补数据，显示空状态 -->
        <div v-if="!loading && reservationData.length === 0" class="empty-state">
          <img src="@/assets/CampusBus/bus-icon1.svg" alt="无预约" class="empty-icon" />
          <div class="empty-text">暂无候补中记录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  queryReservationsByEmployeeIdAndStatus,
  delReservation,
  updateReservation
} from "@/api/busmanagement/reservation";
import { useTeacherStore } from "@/store/modules/teacher";
import useUserStore from "@/store/modules/user";

const router = useRouter();
const activeTab = ref("success"); // 默认选中"预约成功"标签
const headerRef = ref(null); // 头部元素引用
let lastScrollTop = 0; // 上一次滚动位置

// 下拉刷新相关状态
const isRefreshing = ref(false); // 是否正在刷新
const isPulling = ref(false); // 是否正在下拉
const pullDistance = ref(0); // 下拉距离
const startY = ref(0); // 触摸开始Y坐标
const refreshThreshold = 50; // 触发刷新的阈值

const teacherStore = useTeacherStore();
const userStore = useUserStore();

const reservationData = ref([]); // 存储预约数据
const loading = ref(false); // 加载状态

// 返回上一页
const goBack = () => {
  router.back();
};

// 下拉刷新触摸事件处理
const handleTouchStart = (e) => {
  // 如果已经在刷新中，不处理
  if (isRefreshing.value) return;
  
  // 记录开始触摸的位置
  startY.value = e.touches[0].clientY;
  isPulling.value = true;
};

const handleTouchMove = (e) => {
  // 如果不在下拉状态或已经在刷新中，不处理
  if (!isPulling.value || isRefreshing.value) return;
  
  // 计算当前触摸位置与开始位置的差值
  const currentY = e.touches[0].clientY;
  const distance = currentY - startY.value;
  
  // 只有在向下拉且页面在顶部时才处理
  if (distance > 0 && window.scrollY === 0) {
    // 阻止默认滚动行为
    e.preventDefault();
    
    // 应用阻尼系数，使下拉感觉更自然
    const dampingFactor = 0.5;
    pullDistance.value = Math.min(distance * dampingFactor, refreshThreshold * 1.5);
  }
};

const handleTouchEnd = () => {
  // 如果不在下拉状态，不处理
  if (!isPulling.value) return;
  
  isPulling.value = false;
  
  // 如果下拉距离超过阈值，触发刷新
  if (pullDistance.value >= refreshThreshold) {
    // 开始刷新
    isRefreshing.value = true;
    pullDistance.value = refreshThreshold;
    
    // 执行刷新操作
    performRefresh();
  } else {
    // 重置下拉距离
    pullDistance.value = 0;
  }
};

// 执行刷新操作
const performRefresh = async () => {
  try {
    // 重新加载当前标签的数据
    await loadReservationData(activeTab.value);
    ElMessage.success("刷新成功");
  } catch (error) {
    console.error("刷新失败:", error);
    ElMessage.error("刷新失败，请稍后重试");
  } finally {
    // 刷新完成，重置状态
    isRefreshing.value = false;
    pullDistance.value = 0;
  }
};

// 根据标签获取状态值
const getStatusByTab = (tab) => {
  return tab === "success" ? 1 : 2; // 1表示预约成功，2表示候补中
};

// 处理tab切换
const handleTabChange = async (tab) => {
  if (activeTab.value === tab) {
    return; // 防止重复点击
  }

  activeTab.value = tab;

  // 加载对应状态的预约数据
  await loadReservationData(tab);
};

// 加载预约数据
const loadReservationData = async (tab) => {
  if (!teacherStore.teacherInfo?.teacherCode) {
    console.error("教师信息未加载");
    ElMessage.error("教师信息未加载，请刷新页面重试");
    return;
  }

  loading.value = true;
  try {
    const status = getStatusByTab(tab);
    const res = await queryReservationsByEmployeeIdAndStatus({
      employeeId: teacherStore.teacherInfo.teacherCode,
      status,
    });

    if (res.code === 200) {
      // 过滤掉Tbus下departureData日期在今天以前的数据
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      reservationData.value = (res.data || []).filter(item => {
        // 确保item.tBus和item.tBus.tBusDate存在且有departureData
        if (item.tBusDate && item.tBusDate.departureData) {
          const departureDate = new Date(item.tBusDate.departureData);
          departureDate.setHours(0, 0, 0, 0);
          // 只保留日期在今天或之后的数据
          return departureDate >= today;
        }
        // 如果没有有效的日期信息，默认保留该项
        return true;
      });
      // 添加调试日志，查看数据结构
      console.log("预约数据:", reservationData.value);
      if (reservationData.value.length > 0) {
        console.log("第一条预约数据的结构:", reservationData.value[0]);
        console.log("座位相关字段:", {
          currentSeats: reservationData.value[0].currentSeats,
          totalSeats: reservationData.value[0].totalSeats,
          bookedSeats: reservationData.value[0].bookedSeats,
          maxCapacity: reservationData.value[0].maxCapacity,
          tBus: reservationData.value[0].tBus,
          tBusSchedule: reservationData.value[0].tBusSchedule,
        });
      }
    } else {
      ElMessage.error(res.msg || "获取预约数据失败");
      reservationData.value = [];
    }
  } catch (error) {
    console.error("获取预约数据异常:", error);
    ElMessage.error("获取预约数据异常，请稍后重试");
    reservationData.value = [];
  } finally {
    loading.value = false;
  }
};

// 滚动处理函数 - 优化版
const handleScroll = () => {
  // 仅在移动端生效（屏幕宽度小于768px）
  if (window.innerWidth >= 768) return;

  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const statusTabs = document.querySelector(".status-tabs");
  const delta = scrollTop - lastScrollTop;

  // 向上滚动时隐藏头部并固定status-tabs
  if (delta > 0 && scrollTop > 50) {
    if (headerRef.value) {
      headerRef.value.style.transform = "translateY(-100%)";
      headerRef.value.style.transition = "transform 0.3s ease";
    }
    // 固定status-tabs在顶部
    if (statusTabs) {
      statusTabs.style.position = "fixed";
      statusTabs.style.top = "0";
      statusTabs.style.left = "0";
      statusTabs.style.right = "0";
      statusTabs.style.zIndex = "999";
      statusTabs.style.backgroundColor = "transparent";
      statusTabs.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.05)";
      statusTabs.style.transition = "all 0.3s ease";
      // 添加触摸反馈样式
      statusTabs.style.touchAction = "pan-y";
    }
  } else if (scrollTop <= 50) {
    // 回到顶部时恢复正常状态
    if (headerRef.value) {
      headerRef.value.style.transform = "translateY(0)";
      headerRef.value.style.transition = "transform 0.3s ease";
    }
    if (statusTabs) {
      statusTabs.style.position = "static";
      statusTabs.style.backgroundColor = "transparent";
      statusTabs.style.boxShadow = "none";
      statusTabs.style.transition = "all 0.3s ease";
    }
  } else {
    // 向下滚动时显示头部
    if (headerRef.value) {
      headerRef.value.style.transform = "translateY(0)";
      headerRef.value.style.transition = "transform 0.3s ease";
    }
    if (statusTabs) {
      statusTabs.style.position = "static";
      statusTabs.style.backgroundColor = "transparent";
      statusTabs.style.boxShadow = "none";
      statusTabs.style.transition = "all 0.3s ease";
    }
  }

  lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // 避免负值
};

// 处理取消预约
const handleCancelReservation = async (item) => {
  try {
    // 使用更新预约API，将预约状态设置为取消 (3)
    // 注意：这里假设取消状态为3，且id同时作为reservationId和dateId使用。
    // 如果实际API需要不同的dateId，需要根据业务逻辑进行调整。
    await updateReservation({ id: item.id,dateId: item.dateId, reservationStatus: 3 });
    ElMessage.success("取消预约成功");
    // 重新加载数据 
    await loadReservationData(activeTab.value);
  } catch (error) {
    console.error("取消预约失败:", error);
    ElMessage.error("取消预约失败，请稍后重试");
  }
};

// 组件挂载时添加滚动监听和触摸友好的样式设置
onMounted(async () => {
  window.addEventListener("scroll", handleScroll);

  // 设置触摸友好的样式
  const statusTabs = document.querySelector(".status-tabs");
  if (statusTabs) {
    // 确保触摸事件不会被阻止
    statusTabs.style.touchAction = "pan-y";
    // 优化移动设备的点击效果
    statusTabs.style.cursor = "pointer";

    const tabs = statusTabs.querySelectorAll(".tab");
    tabs.forEach((tab) => {
      tab.style.userSelect = "none";
      tab.style.webkitTapHighlightColor = "transparent";
    });
  }

  // 确保教师信息已加载
  if (!teacherStore.teacherInfo?.teacherCode) {
    await teacherStore.fetchTeacherInfo();
  }

  // 加载默认标签的数据
  await loadReservationData(activeTab.value);
});

// 根据行号判断是上午还是下午
const getTimeOfDay = (line) => {
  if (line === 1 || line === 3) {
    return "上午";
  } else if (line === 2 || line === 4) {
    return "下午";
  }
  return "未知"; // 或者可以返回一个默认值，例如 '未知'
};


// 根据日期分组数据
const groupByDate = (data) => {
  console.log("原始预约数据:", data);
  const grouped = {};
  data.forEach((item) => {
    // 使用tBusDate.departureData作为分组依据
    let date = item.tBusDate?.departureData;

    // 如果没有tBusDate.departureData，尝试使用其他可能的日期字段
    if (!date) {
      date = item.date;
    }

    // 确保日期格式为YYYY-MM-DD
    if (!date) {
      // 如果没有日期字段，使用当前日期
      const today = new Date();
      date = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(
        2,
        "0"
      )}-${String(today.getDate()).padStart(2, "0")}`;
    } else if (date.includes("T")) {
      // 如果是ISO格式(如2023-11-15T00:00:00)，只取日期部分
      date = date.split("T")[0];
    } else if (!date.includes("-")) {
      // 如果不是YYYY-MM-DD格式，尝试转换
      const parsedDate = new Date(date);
      if (!isNaN(parsedDate.getTime())) {
        date = `${parsedDate.getFullYear()}-${String(parsedDate.getMonth() + 1).padStart(
          2,
          "0"
        )}-${String(parsedDate.getDate()).padStart(2, "0")}`;
      }
    }

    console.log(
      "处理预约项:",
      item,
      "原始日期:",
      item.tBusDate?.departureData || item.date,
      "处理后日期:",
      date
    );

    if (!grouped[date]) {
      grouped[date] = [];
    }
    grouped[date].push(item);
  });
  console.log("分组后的数据:", grouped);
  return grouped;
};


// 格式化日期显示
const formatDate = (dateStr) => {
  // 如果dateStr已经是YYYY-MM-DD格式，直接使用
  // 如果是其他格式，尝试转换
  let date;

  if (dateStr.includes("-")) {
    // 假设是YYYY-MM-DD格式
    date = new Date(dateStr);
  } else {
    // 尝试其他格式
    date = new Date(dateStr);
  }

  // 如果日期无效，返回原始字符串
  if (isNaN(date.getTime())) {
    return dateStr;
  }

  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);

  const dayAfterTomorrow = new Date(today);
  dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);

  // 比较日期（忽略时间部分）
  const compareDate = new Date(date);
  compareDate.setHours(0, 0, 0, 0);

  if (compareDate.getTime() === today.getTime()) {
    return "今天";
  } else if (compareDate.getTime() === tomorrow.getTime()) {
    // 明天显示具体日期
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${month}月${day}日`;
  } else if (compareDate.getTime() === dayAfterTomorrow.getTime()) {
    // 后天显示具体日期
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${month}月${day}日`;
  } else {
    // 返回格式化的日期，如 "11月15日"
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${month}月${day}日`;
  }
};

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>

<style scoped>
.my-reservation-page {
  padding-bottom: 80px; /* 留出底部导航栏的高度 */
}

/* 下拉刷新容器样式 */
.pull-refresh-container {
  min-height: 100vh;
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 下拉刷新指示器样式 */
.pull-refresh-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  z-index: 10;
}

.pull-refresh-indicator.refreshing {
  background-color: #e6f7ff;
}

.refresh-icon {
  margin-right: 8px;
  color: #999;
  transition: transform 0.3s ease;
}

.refresh-icon.rotating {
  animation: rotate 1s linear infinite;
}

.refresh-text {
  font-size: 14px;
  color: #666;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 页面头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  /* background-color: #4A90E2; */
  color: white;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.3s ease;
  /* white-space: nowrap; */
}

.back-button {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.page-title {
  font-size: 40px;
  font-weight: 600;
}

/* 状态标签 */
.status-tabs {
  display: flex;
  /* background-color: white; */
  padding: 10px 16px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.status-tabs::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.tab {
  padding: 10px 16px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  flex: 1;
  text-align: center;
  position: relative;
  transition: color 0.3s;
  white-space: nowrap;
}

.tab.active {
  color: #fff;
  border-bottom: 2px solid #fff;
  font-weight: 600;
}

/* 预约列表 */
.reservation-list {
  padding: 12px;
}

/* 没有车次信息样式 */
.no-trip-info {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: white;
  border-radius: 8px;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #999;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #666;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  font-size: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-icon {
  width: 64px;
  height: 64px;
  opacity: 0.6;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
}

/* 已取消信息样式 */
.cancel-info {
  font-size: 14px;
  font-weight: 600;
  color: #999;
  margin-right: 16px;
  white-space: nowrap;
}

.date-section {
  margin-bottom: 16px;
}

.date-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
}

.date-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.date-text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.reservation-items {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
}

.reservation-item {
  background-color: white;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.route-info {
  width: 100%;
}

.route-cities {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

.city {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
  flex: 0 0 auto;
}

.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 12px;
  position: relative;
  min-width: 80px;
  flex: 0 0 auto;
}

.time-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.bus-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.info-item {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.info-value {
  font-weight: 600;
  color: #333;
}

.bus-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.cancel-button {
  padding: 6px 12px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  flex: 0 0 auto;
  margin-left: auto;
}

.cancel-button:hover {
  background-color: #e64242;
}

.cancel-button:active {
  background-color: #c23636;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 32px;
  }
  
  .route-cities {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .city {
    flex: 0 0 auto;
  }
  
  .arrow-container {
    margin: 0 8px;
    flex: 0 0 auto;
    min-width: 60px;
  }
  
  .cancel-button {
    flex: 0 0 auto;
    margin-left: auto;
  }
}
</style>
